<template>
  <div class="musiclist">
    <div class="musicitem" v-for="item in musiclist">
      <div class="ablumImg"><img :src="item.picUrl" alt=""/></div>
      <div class="ablumName">{{item.name}}</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        appkey: "cc986a11cf7d4caaaac72444337202c4",
        appid: "34513",
        listType: "5",
        musiclist: []
      }
    },
    created() {
      this.getMusic();
    },
    computed:{
      filteredItems: function () {
        return this.musiclist.slice(0,12)
      }
    },
    methods: {
      getMusic: function () {
         this.$http.get('http://localhost:3000/personalized')
          .then(response => {
            this.musiclist = response.body.result;
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "../../../../static/base/public";
  .musiclist {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .musicitem {
      flex: none;
      width: 49%;
      height: 3.2em;
      padding-bottom: 49%;
      .ablumImg{
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
      }
      .ablumName{
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 1.6;
        height: 3.2em;
        max-height: 3.2em;
      }
    }
  }
  [data-dpr='1'] .musicitem{
    font-size: 14px;
  }
  [data-dpr='2'] .musicitem{
    font-size: 28px;
  }
  [data-dpr='3'] .musicitem{
    font-size: 42px;
  }
</style>
